<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>网上订餐</title>
    <link th:href="@{/project/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/project/css/index.css}" rel="stylesheet"/>
</head>
<body>
<!------------------------------head------------------------------>
<div class="head" th:include="include::normal_headDiv"></div>
<!-------------------------banner--------------------------->
<!--<div class="block_home_slider">-->
<!--    <div id="home_slider" class="flexslider">-->
<!--        <ul class="slides">-->
<!--            <li>-->
<!--                <div class="slide">-->
<!--                    <img th:src="@{/img/banner4.jpg}" th:width="1200px" th:height="560px"/>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <div class="slide">-->
<!--                    <img th:src="@{/img/banner2.jpg}" th:width="1200px" th:height="560px"/>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li>-->
<!--                <div class="slide">-->
<!--                    <img th:src="@{/img/banner3.jpg}" th:width="1200px" th:height="560px"/>-->
<!--                </div>-->
<!--            </li>-->
<!--            &lt;!&ndash;<li>&ndash;&gt;-->
<!--            &lt;!&ndash;<div class="slide">&ndash;&gt;-->
<!--            &lt;!&ndash;<img th:src="@{/img/banner2.jpg}" th:width="1200px" th:height="560px"/>&ndash;&gt;-->
<!--            &lt;!&ndash;</div>&ndash;&gt;-->
<!--            &lt;!&ndash;</li>&ndash;&gt;-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->

<div id="footer" th:include="include::normal_footerDiv"></div>
<div th:include="include::footer_normal"></div>
<script th:src="@{/project/nav.js}"></script>
<script th:inline="javascript">
    $(function () {
        $('#home_slider').flexslider({
            animation: 'slide',
            controlNav: true,
            directionNav: false,
            animationLoop: true,
            slideshow: true,
            slideshowSpeed: 2000,
            useCSS: false
        });
    });
    var goodsTypes = [[${@dict.getType('goods_type_item')}]];
    for (var i = 0; i < goodsTypes.length; i++) {
        var typeObj = goodsTypes[i];
        $.ajax({
            url: ctx + "index/listGoodsByType",
            async: false,
            data: {goodsType: typeObj.dictValue},
            success: function (data) {
                if (data.length > 0) {
                    loadData(data, typeObj);
                }
            }
        })
    }

    function loadData(data, typeObj) {
        var _$dataModel = $('<div class="people">' +
            '<div class="xwrapper">' +
            '<h2><a></a></h2>' +
            '<div class="pList clearfix tran"></div>' +
            '</div></div>');
        _$dataModel.find("h2 a").html(typeObj.dictLabel)
            .attr("href", ctx + "index/searchGoods?dictCode=" + typeObj.dictCode);
        var htmlStr = [];
        for (var i = 0; i < data.length; i++) {
            var onclickUrl = ctx + "index/findGoodsById/" + data[i].goodsId;
            htmlStr.push('<a href="' + onclickUrl + '"><dl>' +
                '<dt><span class="abl"></span><img src="'+ data[i].imgUrl + '"><span class="abr"></span></dt>' +
                '<dd>' + data[i].goodsName + '</dd>' +
                '<dd><span>￥' + data[i].goodsPrice + '</span></dd>' +
                '</dl></a>');
        }
        _$dataModel.find(".pList").html(htmlStr.join(""));
        $("#footer").before(_$dataModel[0].outerHTML);
    }

</script>

</body>
</html>
